<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>监视（watch）</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>

    <div id="app">
        <h2>今天天气很{{ info }}</h2>
        <button @click="isHot = !isHot">切换天气</button>

        <hr />

        {{ numbers.a }}
        <button @click="numbers.a += 1">a + 1</button>
    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                isHot: true,
                numbers: {
                    a: 1,
                    b: 2
                }
            },
            computed: {
                info() {
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            watch: {

                // 监视普通属性-正常写法
                // isHot: {
                //   handler(newValue, oldValue) {
                //     console.log("isHot newValue:", newValue);
                //     console.log("isHot oldValue:", oldValue);
                //   },
                //   immediate: true
                // },

                // 监视普通属性-简写
                // isHot(newValue, oldValue) {
                //   console.log("isHot newValue:", newValue);
                //   console.log("isHot oldValue:", oldValue);
                // },

                // 监视计算属性
                info: {
                    handler(newValue, oldValue) {
                        console.log('info newValue:', newValue)
                        console.log('info oldValue:', oldValue)
                    },
                    immediate: true
                },

                // 监视多级结构中某个属性的变化
                'numbers.a': {
                    handler(newValue, oldValue) {
                        console.log('numbers.a newValue:', newValue)
                        console.log('numbers.a oldValue:', oldValue)
                    }
                },

                // 监视多级结构中所有属性的变化
                numbers: {
                    handler(newValue, oldValue) {
                        console.log('numbers newValue:', newValue)
                        console.log('numbers oldValue:', oldValue)
                    },
                    deep: true
                }

            }
        })

        // // 正常写法
        // vm.$watch("isHot", {
        //   // handler 什么时候调用？
        //   //    当 isHot 发生改变时
        //   handler(newValue, oldValue) {
        //     console.log("newValue:", newValue);
        //     console.log("oldValue:", oldValue);
        //   },
        //   immediate: true // 初始化时让 handler 调用一下
        // });

        // 简写
        vm.$watch('isHot', function (newValue, oldValue) {
            console.log('isHot newValue:', newValue)
            console.log('isHot oldValue:', oldValue)
        })
    </script>

</body>
</html>